<template>
  <view class="payment-code-page">
    <!-- 微信收款码 -->
    <view class="code-section">
      <view style="display: flex;flex-direction: row;">
        <text class="section-title">微信收款码</text>
        <view class="upload-container" style="margin-left: 40px;">
          <div v-if="weChatCode" class="image-wrapper">
            <image :src="weChatCode" mode="aspectFit"></image>
            <button class="remove-button" @tap="removeWeChatImage">×</button>
          </div>
          <view v-else class="upload-button" @tap="chooseWeChatImage">
            <image src="/static/上传图片.png" mode="aspectFit"></image>
            <text>上传照片</text>
          </view>
        </view>
      </view>
      <text class="description">
        先在微信App中下载微信收款码图片，然后再上传，结算时选择微信即可出示给顾客付款
      </text>
    </view>

    <!-- 支付宝收款码 -->
    <view class="code-section">
      <view style="display: flex;flex-direction: row;">
        <text class="section-title">支付宝收款码</text>
        <view class="upload-container">
          <div v-if="alipayCode" class="image-wrapper">
            <image :src="alipayCode" mode="aspectFit"></image>
            <button class="remove-button" @tap="removeAlipayImage">×</button>
          </div>
          <view v-else class="upload-button" @tap="chooseAlipayImage">
            <image src="/static/上传图片.png" mode="aspectFit"></image>
            <text>上传照片</text>
          </view>
        </view>
      </view>
      <text class="description">
        先在支付宝App中下载支付宝收款码图片，然后再上传，结算时选择支付宝即可出示给顾客付款
      </text>
      <text class="note">
        注意支付宝收款码需在支付宝App中完善经营信息后才能成功收款哦~
      </text>
    </view>

    <!-- 保存按钮 -->
    <view class="save-button-container">
      <button type="primary" @tap="saveCodes">保存</button>
    </view>

    <!-- 提示 -->
    <view class="note-container">
      <text class="note">
        注：使用支付的商家，请在微信收款码和支付宝收款码设置处均上传收款码图片
      </text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const weChatCode = ref('');
const alipayCode = ref('');

// 加载已保存的收款码图片
onMounted(() => {
  weChatCode.value = uni.getStorageSync('weChatCode') || '';
  alipayCode.value = uni.getStorageSync('alipayCode') || '';
});

async function chooseWeChatImage() {
  const result = await uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera']
  });
  if (result.tempFilePaths.length > 0) {
    saveImageToStorage(result.tempFilePaths[0], 'weChat');
  }
}

async function chooseAlipayImage() {
  const result = await uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera']
  });
  if (result.tempFilePaths.length > 0) {
    saveImageToStorage(result.tempFilePaths[0], 'alipay');
  }
}

function removeWeChatImage() {
  weChatCode.value = '';
  uni.removeStorageSync('weChatCode'); // 同时清除本地存储中的记录
}

function removeAlipayImage() {
  alipayCode.value = '';
  uni.removeStorageSync('alipayCode'); // 同时清除本地存储中的记录
}

function saveImageToStorage(filePath, type) {
  if (type === 'weChat') {
    weChatCode.value = filePath;
    uni.setStorageSync('weChatCode', filePath);
    console.log("Saved weChatCode:", filePath); // 添加日志以确认保存
  } else if (type === 'alipay') {
    alipayCode.value = filePath;
    uni.setStorageSync('alipayCode', filePath);
    console.log("Saved alipayCode:", filePath); // 添加日志以确认保存
  }
}
</script>

<style scoped>
body{
	background-color: #f5f5f5;
}
.payment-code-page {
  background-color: #f5f5f5;
}

.code-section {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
}

.section-title {
  font-size: 20px;
  margin-bottom: 10px;
}

.description {
  font-size: 18px;
  color: #666;
  margin-top: 10px;
}

.upload-container {
  position: relative;
  width: 120px; /* 根据您的需求调整宽度 */
  height: 120px; /* 根据您的需求调整高度 */
  margin: 0px 10px 10px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-wrapper image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例的同时尽可能填满容器 */
}

.remove-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 22px;
  font-size: 18px;
  color: red;
  cursor: pointer;
}

.upload-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  border-radius: 5px;
}

.upload-button image {
  width: 40px;
  height: 35px;
  margin-bottom: 10px;
}

.save-button-container {
  text-align: center;
  margin-top: 20px;
}

.note-container {
  margin-top: 20px;
  text-align: center;
}

.note {
  font-size: 18px;
  color: #666;
}
</style>